<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" content="IE=edge,chrome=1">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="no-cache" http-equiv="cache-control">
    <meta content="0" http-equiv="expires">
    <title>登录界面</title>
    <link href="/static/css/default.css" rel="stylesheet" type="text/css"/>
    <!--必要样式-->
    <link href="/static/css/styles.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/loaders.css" rel="stylesheet" type="text/css"/>
    <link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="https://www.jq22.com/jquery/animate-3.1.0.min.css" rel="stylesheet">
</head>
<body>
<div class='login animated' id="loginForm">
    <div class='success'></div>
    <div class='login_title'>
        <span style="font-size: 26px">登录</span>
    </div>
    <div class='login_fields'>
        <div class='login_fields__user'>
            <div class='icon'>
                <img alt="" src='/static/img/user_icon_copy.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="16" name="login" placeholder='用户名' type='text' value=""/>
            </label>
            <div class='validation'>
                <img alt="" src='/static/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='/static/img/lock_icon_copy.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="16" name="pwd" placeholder='密码' type='text'>
            </label>
            <div class='validation'>
                <img alt="" src='/static/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='/static/img/key.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="4" name="code" placeholder='验证码' type='text'>
            </label>
            <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
            </div>
        </div>
        <div class='login_fields__submit'>
            <input id="loginBtn" type='button' value='登录'> <a href="javascript:0;" onclick="cutover('#loginForm','#registerForm')"
                                                style="color: #f57d7d">没有账号？去注册</a>
        </div>
    </div>

    <div class='disclaimer'>
        <p>老大的剑&统一认证中心</p>
    </div>
</div>
<div class='login animated' id="registerForm" style="display: none">
    <div class='login_title'>
        <span style="font-size: 26px">注册</span>
    </div>
    <div class="login_fields">
        <div class='login_fields__user'>
            <div class='icon'>
                <img alt="" src='/static/img/user_icon_copy.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="16" name="registerAnAccount" placeholder='用户名' type='text'
                       value=""/>
            </label>
            <div class='validation'>
                <img alt="" src='/static/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='/static/img/lock_icon_copy.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="16" name="signUpPassword" placeholder='密码' type='password'
                       value=""/>
            </label>
            <div class='validation'>
                <img alt="" src='/static/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='/static/img/lock_icon_copy.png'>
            </div>
            <label>
                <input autocomplete="off" maxlength="16" name="signUpPassword2" placeholder='确认密码' type='password'
                       value=""/>
            </label>
            <div class='validation'>
                <img alt="" src='/static/img/tick.png'>
            </div>
        </div>
        <div class='login_fields__submit'>
            <input  id="registerBtn" type='button' value='注册'> <a href="javascript:0;" onclick="cutover('#registerForm','#loginForm')"
                                                style="color: #f57d7d">有账号？直接登录</a>
        </div>
    </div>
    <div class='disclaimer'>
        <p>老大的剑&统一认证中心</p>
    </div>
</div>
<div class='authent'>
    <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <p>认证中...</p>
</div>
<div class="OverWindows"></div>
<input id="url" th:value="${url}" type="hidden">
<script src="/static/js/jquery-3.5.1/jquery-3.5.1.js" type="text/javascript"></script>
<script src="/static/js/jquery-ui.min.js" type="text/javascript"></script>
<script src='/static/js/stopExecutionOnTimeout.js?t=1' type="text/javascript"></script>
<script src="/static/layui/layui.js" type="text/javascript"></script>
<script src="/static/js/Particleground.js" type="text/javascript"></script>
<script src="/static/Js/Treatment.js" type="text/javascript"></script>
<script src="/static/js/jquery.mockjax.js" type="text/javascript"></script>
<script type="text/javascript">
    let CurrentPage='#loginForm';
    function cutover(id,otherId) {
        CurrentPage =otherId;
        if (id==='#loginForm'){
        $(id).addClass('bounceOutLeft');
        $(otherId).addClass('bounceInRight').toggle();
        setTimeout(function(){
            $(id).removeClass('bounceOutLeft').toggle();
            $(otherId).removeClass('bounceInRight');
        }, 1000);
        }else {
            $(id).addClass('bounceOutRight');
            $(otherId).addClass('bounceInLeft').toggle();
            setTimeout(function(){
                $(id).removeClass('bounceOutRight').toggle();
                $(otherId).removeClass('bounceInLeft');
            }, 1000);
        }
    }
    let canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    let CodeVal = 0;
    let urlVal = $("#url").val();
    Code();
    $('input[name="login"]').focus();

    function Code() {
        if (canGetCookie === 1) {
            createCode("AdminCode");
            let AdminCode = getCookieValue("AdminCode");
            showCheck(AdminCode);
        } else {
            showCheck(createCode(""));
        }
    }

    function showCheck(a) {
        CodeVal = a;
        let c = document.getElementById("myCanvas");
        let ctx = c.getContext("2d");
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.font = "80px 'Hiragino Sans GB'";
        ctx.fillStyle = "#E8DFE8";
        ctx.fillText(a, 0, 100);
    }

    $(document).keypress(function (e) {
        if (e.which === 13) {
            $('CurrentPage input[type="button"]').click();
        }
    });
    //粒子背景特效
    $('body').particleground({
        dotColor: '#E8DFE8',
        lineColor: '#133b88'
    });
    $('input[name="pwd"]').focus(function () {
        $(this).attr('type', 'password');
    });
    $('input[type="text"]').focus(function () {
        $(this).prev().animate({'opacity': '1'}, 200);
    });
    $('input[type="text"],input[type="password"]').blur(function () {
        $(this).prev().animate({'opacity': '.5'}, 200);
    });
    $('input[name="login"],input[name="pwd"],input[name="registerAnAccount"],input[name="signUpPassword"],input[name="signUpPassword2"]').keyup(function () {
        let Len = $(this).val().length;
        if (!$(this).val() === '' && Len >= 5) {
            $(this).next().animate({
                'opacity': '1',
                'right': '30'
            }, 200);
        } else {
            $(this).next().animate({
                'opacity': '0',
                'right': '20'
            }, 200);
        }
    });
    let open = 0;
    layui.use('layer', function () {
        let $authent = $('.authent');
            $('#loginBtn').click(function () {
                let login = $('input[name="login"]').val();
                let pwd =   $('input[name="pwd"]').val();
                let code = $('input[name="code"]').val();
                if (login === '') {
                    layer.msg('账号不能为空');
                    $('input[name="login"]').focus();
                } else if (pwd === '') {
                    layer.msg('密码不能为空');
                    $('input[name="pwd"]').focus();
                } else if (code.toUpperCase() !== CodeVal.toUpperCase()) {
                    layer.msg('验证码错误');
                    $('input[name="code"]').focus();
                } else {
                    $('.login').addClass('test'); //倾斜特效
                    setTimeout(function () {
                        $('.login').addClass('testtwo'); //平移特效
                    }, 300);
                    setTimeout(function () {
                        $authent.show().animate({right: -320}, {
                            easing: 'easeOutQuint',
                            duration: 600,
                            queue: false
                        });
                        $authent.animate({opacity: 1}, {
                            duration: 200,
                            queue: false
                        }).addClass('visible');
                    }, 500);
                    let JsonData = {username: login, password: pwd};
                    let url = "/login";
                    AjaxPost(url, JsonData,
                        function () {
                        },
                        function (res) {
                            res = JSON.parse(res)
                            setTimeout(function () {
                                $authent.show().animate({right: 90}, {
                                    easing: 'easeOutQuint',
                                    duration: 600,
                                    queue: false
                                });
                                $authent.animate({opacity: 0}, {
                                    duration: 200,
                                    queue: false
                                }).addClass('visible');
                                $('.login').removeClass('testtwo'); //平移特效
                            }, 500);
                            setTimeout(function () {
                                $authent.hide();
                                $('.login').removeClass('test');
                                if (res.code === 200) {
                                    //登录成功
                                    $('.login div').fadeOut(100);
                                    $('.success').fadeIn(1000);
                                    $('.success').html(res.msg);
                                    //跳转操作
                                    if (urlVal === null || urlVal === '') {
                                        window.location.href = "/"
                                    } else {
                                        window.location.href = urlVal + "?token=" + res.data;
                                    }
                                } else {
                                    AjaxErro(res);
                                    Code();
                                }
                            }, 500);
                        })
                }
            })
    })
    layui.use('layer',function () {
        let $authent = $('.authent');
            $('#registerBtn').click(function () {
                $('#registerBtn').addClass('disabled')
                let username = $('input[name="registerAnAccount"]').val();
                let password = $('input[name="signUpPassword"]').val();
                let password2 = $('input[name="signUpPassword2"]').val();
                if (username === '') {
                    layer.msg('账号不能为空');
                    $('input[name="registerAnAccount"]').focus();
                } else if (password === '') {
                    layer.msg('密码不能为空');
                    $('input[name="signUpPassword"]').focus();
                } else if (password2 === '') {
                    layer.msg('确认密码不能为空');
                    $('input[name="signUpPassword2"]').focus();
                } else if (password !== password2) {
                    layer.msg('两次密码不一致');
                    $('input[name="registerAnAccount"]').focus();
                } else {
                    $('.login').addClass('test'); //倾斜特效
                    setTimeout(function () {
                        $('.login').addClass('testtwo'); //平移特效
                    }, 300);
                    setTimeout(function () {
                        $authent.show().animate({right: -320}, {
                            easing: 'easeOutQuint',
                            duration: 600,
                            queue: false
                        });
                        $authent.animate({opacity: 1}, {
                            duration: 200,
                            queue: false
                        }).addClass('visible');
                    }, 500);
                    let JsonData = {username: username, password: password};
                    let url = "/userRegister";
                    AjaxPost(url, JsonData,
                        function () {
                        },
                        function (res) {
                            res = JSON.parse(res)
                            setTimeout(function () {
                                $authent.show().animate({right: 90}, {
                                    easing: 'easeOutQuint',
                                    duration: 600,
                                    queue: false
                                });
                                $authent.animate({opacity: 0}, {
                                    duration: 200,
                                    queue: false
                                }).addClass('visible');
                                $('.login').removeClass('testtwo'); //平移特效
                            }, 500);
                            setTimeout(function () {
                                $authent.hide();
                                $('.login').removeClass('test');
                                if (res.code === 200) {
                                    //注册成功
                                    $('.success').fadeIn(1000);
                                    $('.success').html(res.msg);
                                    $authent.hide();
                                    cutover('#registerForm','#loginForm');
                                    $('input[type="text"],input[type="password"]').val('')
                                    $('input[name="login"]').val(username);
                                    $('input[name="pwd"]').focus();
                                } else {
                                    AjaxErro(res);
                                    Code();
                                }
                            }, 500);
                        })
                }
                $('#registerBtn').removeClass("disabled")
            })
    })
</script>
</body>
</html>